<template>
    <div>
        <!-- 卡片一：扫二维码 -->
        <div class="card bg-light mt-3">
            <div class="card-body d-flex">
                <img :src="map.user_weixin_url" width="120px" alt="">
                <div class="ms-5">
                    <p>&bull; 技术干货分享</p>
                    <p>&bull; 免费资料领取</p>
                    <p class="fw-bolder">&bull; 扫码领取更多惊喜</p>
                </div>
            </div>
        </div>

        <!-- 卡片二：联系方式 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>社交</h5>
                <hr />
                <p>QQ: {{map.user_qq_no}}</p>
                <p>邮箱: {{map.user_email}}</p>
            </div>
        </div>

        <!-- 广告图 -->
        <a :href="map.ad_url" target="_blank"> <img class="mt-3" :src="map.ad_1001_url" alt="" style="height: 130px; width: 100%;"></a>
       
        <!-- 卡片三：文章分类 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>分类</h5>
                <hr />

                <p v-for="(type, index) in articleTypeStatistics" :key="index">
                    <a :href="'blog-classify.html?' + type.id" class="card-link text-decoration-none text-primary">
                        {{ type.typeName }} <span style="color: gray">({{ type.count }})</span>
                    </a>
                </p>
            </div>
        </div>

        <!-- 卡片四：归档 -->
        <div class="card bg-light mt-3">
            <div class="card-body">
                <h5>归档</h5>
                <hr />
                <p v-for="(gd,index) in gdList" :key="index">
                    <a href="blog-archives.html" class="card-link text-decoration-none text-primary">
                        {{gd.psdateStr}} <span style="color: gray">({{gd.count}})</span>
                    </a>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
module.exports = {
    data() {
        return {
            //文章分类统计数组
            articleTypeStatistics: [],
            gdList: [],//归档集合
            map: {}//参数map
        };
    },
    methods: {
        getArticleTypeStatistics() {
            this.$http.get("/articleType/articleTypeStatistics").then(res => {
                //console.log(res);
                //给分类统计数组赋值
                this.articleTypeStatistics = res.data;
            }).catch(() => {
                this.$message.error("网络异常，请稍后重试！【400/404/...】");
            })
        },
        getGdList(){
            this.$http.get("/article/PlaceOnFile/").then((res)=>{
                this.gdList=res.data;
            }).catch((res)=>{
                this.$message.error("网络异常，请稍后重试！【400/404/...】");
            });
        },
        getMap(){
            this.$http.get("/param/map").then((res)=>{
                this.map=res.data;
            }).catch((res)=>{
                this.$message.error("网络异常，请稍后重试！【400/404/...】");
            });
        }
    },
    mounted() {
        //调用分类统计函数
        this.getArticleTypeStatistics();
        this.getGdList();
        this.getMap();
    },
}
</script>

<style></style>